@charset "utf-8";
@import 'reset';
@import 'common';
%common {
  margin: 0 auto;
  position: relative;
  width: 145px;
  height: 36px;
  text-align: center;
  border: 1px solid $color;
  h3 {
    position: absolute;
    width: 95px;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    background-color: #fff;
  }
}
.about{
  width: 1000px;
  height: 482px;
  background-color: #fafafa;
  overflow: hidden;
.about-us {
  @extend %common;
  margin-top: 26px;
  span {
    position: absolute;
    width: 95px;
    top: 6px;
    left: 24px;
    background-color: #fff;
    font-size: 16px;
  }
  }
.about-box{
    margin-top: 20px;
        width: 1000px;
        height: 319px;
        display: flex;
        justify-content: space-around;
        .about-I{
          width: 267px;
          height: 319px;
          background-color: #f2f2f2;
        }
        .about-T{
          width: 322px;
          height: 319px;
          background-color: #f2f2f2;
        }
        .about-V{
          width: 270px;
          height: 319px;
          background-color: #f2f2f2;
        }
        .characters{
          margin: 18px auto 16px;
          width: 126px;
          height: 126px;
          img{
              width: 126px;
              height: 126px;
          }
      }
      h3{
          text-align: center;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          letter-spacing: 3px;
          color: #000000;
      }
      p{
              margin: 0 auto;
              width: 245px;
              height: 88px;
              font-family: MicrosoftYaHei;
              font-size: 12px;
              line-height: 25px;
              letter-spacing: 2px;
              color: #838383;
      
      }
  }
.about-op {
    @extend %common;
    margin-top: 26px;
    span{
    position: absolute;
    width: 132px;
    top: 24px;
    left: -18px;
    background-color: #fff;
    font-size: 16px;
    }
    }
}
.project{
  overflow: hidden;
  margin-top: 30px;
  width: 1000px;
  height: 660px;
}
.p-img{
  overflow: hidden;
  margin: 0 auto;
  width: 900px;
  height: 210px;
  display: flex;
  justify-content: space-between;
  img{
      border: 2px solid black;
      width: 288px;
      height: 210px;
  }
}
.pb-item{
  margin: 20px auto;
  width: 860px;
  height: 15px;
  display: flex;
  justify-content: space-between;
  h3{
          width: 243px;
          height: 13px;
          font-family: MicrosoftYaHei;
          font-size: 12px;
          letter-spacing: 2px;
          color: #000000;
  }
}
.button{
  margin: 20px auto;
  width: 770px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  button{
          cursor: pointer;
          background-color: #6dbfff;
          width: 135px;
          height: 28px;
          font-family: MicrosoftYaHei-Bold;
          font-size: 16px;
          letter-spacing: 3px;
          color: #ffffff;
  }
}
.interlinkage{
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 900px;
  height: 306px;
  background-color: #313131;
  background-image: url(../images/index/link.png);
  .about-link {
    @extend %common;
    margin: 26px auto;
    h3{
      margin-top: 4px;
      background-color: #63666a;
      color: white;
    }
    span {
      position: absolute;
      width: 95px;
      top: 12px;
      left: 24px;
      background-color: #63666a;
      color: white;
      font-size: 16px;
    }
    }
      .arrowhead{
          position: absolute;
          top: 116px;
          width: 38px;
          height: 70px;
          background-color: #33332e;
          img{
              width: 18px;
              height: 30px;
             margin: 22px 12px 17px 7px;
          }
      }
      .aone{
          left: 7px;
      }
      .atwo{
          right: 7px;
      }
      .link-img{
          margin: 0 auto;
          width: 732px;
          height: 82px;
          display: flex;
          justify-content: space-between;
          img{
              width: 222px;
              height: 81px;
          }
      }
}